<template>
  <div class="holiday">
    <!--左边二级侧边栏-->
    <div class="content-left"></div>
    <!--右边内容-->
    <div class="content-right">
      <div class="content-top">
        <span>节假日管理</span>
      </div>
      <div class="content-content">
        <div class="content-head flex flex-between">
          <div class="input-item fl">
            <span class="span-input fl">
              <el-button type="primary" @click="FnAdd">新增节假日</el-button>
            </span>
          </div>
        </div>
        <div class="content-table">
          <Table
            ref="Table"
            :columns="tableConfig.columns"
            :url="tableConfig.url"
            :pparams="tableConfig.pparams"
            @tableBubbling="TableBubbling"
          ></Table>
        </div>
      </div>
    </div>

    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import Vmask from '@/components/vmask.vue'
import {dept, tempShifts, holidayRegulato} from '@/const/api'
import mixins from '@/const/mixins'

export default {
  name: 'Holiday',
  components: {
    Table,
    Vmask,
  },
  mixins: [mixins],
  data() {
    return {
      params: {
        date: '',
      },
      tableConfig: {
        url: '/HolidayRegulato/getHoliday',
        columns: [
          {
            dataIndex: 'name',
            title: '节假日名称',
          },
          {
            dataIndex: 'startDay',
            title: '开始时间',
          },
          {
            dataIndex: 'endDay',
            title: '结束时间',
          },
          {
            dataIndex: 'status',
            title: '是否可补休',
            type: 'meiju',
            meiju: {
              '0': '否',
              '1': '是',
            },
          },
          {
            dataIndex: 'className',
            title: '班次',
          },
          {
            dataIndex: 'deptName',
            title: '部门',
          },
          {
            align: 'center',
            dataIndex: ['modify', 'delete'],
            title: '操作',
          },
        ],
        pparams: {},
        params: {},
      },
      mask: {
        id: null,
        title: '',
        showMask: false,
        form: [
          {
            title: '节假日名称',
            width: '',
            type: 'text',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写节假日名称',
            disabled: false,
            required: true,
          },
          {
            title: '开始时间',
            width: '',
            type: 'date',
            name: 'startDay',
            value: '',
            default: '',
            placeholder: '请填写开始时间',
            disabled: false,
            required: true,
          },
          {
            title: '结束时间',
            width: '',
            type: 'date',
            name: 'endDay',
            value: '',
            default: '',
            placeholder: '请填写结束时间',
            disabled: false,
            required: true,
          },
          {
            title: '是否可补休',
            width: '',
            type: 'radio',
            name: 'status',
            radio: [
              {
                label: '是',
                value: '1',
              },
              {
                label: '否',
                value: '0',
              },
            ],
            value: '0',
            default: '',
            placeholder: '请填写是否可补休',
            disabled: false,
            required: true,
          },
          {
            title: '部门',
            width: '',
            type: 'select',
            name: 'deptId',
            value: '',
            default: '',
            placeholder: '请填写部门',
            disabled: false,
            required: true,
          },
          {
            title: '班次',
            width: '',
            type: 'select',
            name: 'classId',
            value: '',
            default: '',
            placeholder: '请填写班次',
            disabled: true,
            required: true,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      timeStart: new Date(),
    }
  },
  async created() {
    window._this = this
    this.getDepartmentList(0) // 获取部门列表
  },
  methods: {
    async FnMask(e) {
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask

      let timeStart = this.timeStart
      let timeEnd = new Date()

      if (timeEnd - timeStart >= 1000 || type != 'addHoliday') {
        if (type == 'cancel') {
          mask.showMask = false
          delete mask.addHoliday
          this.$utils.clearForm(mask.form)
        } else if (type == 'selectChange') {
          if (content.content.name == 'deptId') {
            let {data, state, code, msg, count} = await this.$axios.$get(
              tempShifts('List'),
              {
                params: {
                  deptId: content.content.value,
                  pageNum: 0,
                  pageSize: 0,
                },
              },
            )
            if (state == this.ResCode) {
              data &&
                data.length &&
                data.forEach((n1, i1) => {
                  n1.label = n1.className
                  n1.value = n1.id
                })

              this.mask.form[content.index + 1].disabled = false
              this.mask.classIdOptions = data
            }
          }
        } else if (type == 'addHoliday') {
          this.$utils.maskForm(content.form).then(
            async res => {
              let responent
              res.startDay = new Date(res.startDay).getTime()
              res.endDay = new Date(res.endDay).getTime()
              mask.btnLoading = true
              if (mask.id) {
                res.id = mask.id
                responent = await this.$axios.$get(
                  holidayRegulato('changeHoliday'),
                  {params: res},
                )
              } else {
                responent = await this.$axios.$get(
                  holidayRegulato('addHoliday'),
                  {params: res},
                )
              }
              mask.btnLoading = false
              mask.showMask = false
              if (responent.state == this.ResCode) {
                !mask.id
                  ? this.$Message.success('保存成功')
                  : this.$Message.success('修改成功')
                delete mask.addHoliday
                this.$utils.clearForm(mask.form)
                setTimeout(() => {
                  this.$refs['Table'].fetchList()
                }, 100)
              } else {
                this.$Message.error(responent.msg)
              }
            },
            err => {
              this.$Message.error(err)
            },
          )
        }
        this.timeStart = timeEnd
      }
    },
    TableBubbling(e) {
      console.log(e, 'content')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'modify') {
        mask.showMask = true
        mask.addHoliday = true
        mask.id = content.id // 有id表示新增
        mask.title = '编辑节假日'
        this.$utils.maskForm(content, mask.form).then(async res => {
          let {data, state, code, msg, count} = await this.$axios.$get(
            tempShifts('List'),
            {params: {deptId: content.deptId, pageNum: 0, pageSize: 0}},
          )
          if (state == this.ResCode) {
            data &&
              data.length &&
              data.forEach((n1, i1) => {
                n1.label = n1.className
                n1.value = n1.id
              })
            this.mask.classIdOptions = data
          }
          res.forEach(n1 => {
            n1.name == 'classId' && (n1.disabled = false)
            n1.name == 'startDay' &&
              (n1.value = content.startDay.replace('/', '-') + ' 00:00:00')
            n1.name == 'endDay' &&
              (n1.value = content.endDay.replace('/', '-') + ' 00:00:00')
          })
          mask.form = res
        })
      } else if (type == 'delete') {
        const h = this.$createElement
        this.$msgbox({
          title: '删除提示',
          message: h('p', null, [
            h('span', null, '你确定删除该记录吗？'),
            h('i', {style: 'color: teal; fontStyle: normal'}, content.name),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '删除中...'
              this.$axios
                .$get(holidayRegulato('delHoliday'), {params: {id: content.id}})
                .then(res => {
                  if (res.state == this.ResCode) {
                    this.$Message.success('删除成功')
                    setTimeout(() => {
                      this.$refs['Table'].fetchList()
                    }, 100)
                  } else {
                    this.$Message.error(res.msg)
                  }
                  done()
                  instance.confirmButtonLoading = false
                  instance.confirmButtonText = '确定'
                })
            } else {
              done()
            }
          },
        }).then(action => {})
      }
    },
    FnAdd() {
      this.mask.showMask = true
      this.mask.addHoliday = true // 新建班次的标识
      this.mask.id = null // 新建没有id
      this.mask.title = '新建节假日'
      this.mask.form.forEach(n1 => {
        if (n1.name == 'classId') n1.disabled = true
      })
    },
  },
}
</script>

<style lang="less">
.holiday {
}
</style>
